<template>
  <div class="container">
    <!-- BEGIN 商品详情 -->
    <div class="framerich goods-detail" v-if="goods.body" v-html="goods.body"></div>
    <!-- END 商品详情 -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      goods: {
        body: ''
      }
    }
  },
  created: function () {
    this.onLoad()
  },
  mounted: function () {
    console.log('--------mounted-------')
  },
  watch: {},
  computed: {},
  methods: {
    onLoad () {
      let spuid = this.$route.params.id
      this.axios
        .get('/shop/product/' + spuid, {
          headers: { FastMode: true }
        })
        .then(response => {
          this.goods = response.data
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.goods-detail {
  word-wrap: break-word;
  font-size: 80%;
  h1 {
    color: #f44;
    font-weight: normal;
  }
  p {
    padding: 0;
  }
  img {
    width: 100%;
  }
}
</style>
